/**
 * 查看当前流程节点
 */

import { OneModal } from '@/components/one-ui';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { IOneModalRef } from '@/pages/type';
import { Empty, Spin } from 'antd';
import { Ref, useEffect, useRef } from 'react';
import { getImageByProcInstIDService } from '../services';

export const WorkCurrentNodesImg: React.FC<WorkflowOtherFuncAPI.IWorkCurrentNodesImg> = ({
  onClose,
  openVisible,
  requestController,
  procInstID,
}) => {
  /**
   * modal ref
   */
  const currentNodesRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (currentNodesRef) {
      if (currentNodesRef.current) {
        if (currentNodesRef.current.onModalCancel) {
          currentNodesRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 引入获取当前流程节点 图片接口
   */
  const {
    getImageByProcInstIDData,
    getImageByProcInstIDLoading,
    getImageByProcInstIDRun,
  } = getImageByProcInstIDService(requestController);

  useEffect(() => {
    if (openVisible) {
      const imgParams: Record<string, any> = {
        procInstID: procInstID,
      };
      getImageByProcInstIDRun(imgParams);
    }
  }, [openVisible]);

  return (
    <>
      <OneModal
        open={true}
        // getContainer={false}
        ref={currentNodesRef}
        title={'查看当前流程进度'}
        width={document.body.clientWidth * 0.7}
        onCancel={onClose}
        bodyStyle={{
          padding: '0px',
          height: document.body.clientHeight * 0.6,
          textAlign: 'center',
          lineHeight: `${document.body.clientHeight * 0.6}px`,
        }}
        centered
        onOk={() => {
          onCloseModal();
        }}
        confirmLoading={getImageByProcInstIDLoading}
      >
        <Spin spinning={getImageByProcInstIDLoading}>
          {getImageByProcInstIDData ? (
            <ScrollBarLayout
              style={{
                margin: '10px 0px',
                padding: '0px 10px',
                overflowX: 'auto',
              }}
            >
              <img src={`data:image/jpeg;base64,${getImageByProcInstIDData}`} />
            </ScrollBarLayout>
          ) : (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description={'暂无流程图'}
            />
          )}
        </Spin>
      </OneModal>
    </>
  );
};
